<template>
  <div class="sight-bead">
    <div class="header-top">
      <div class="code">CS准星代码</div>
      <p class="desc">
        在csgo中快速提高的方法是模仿您喜欢的职业选手 —— 从他们的准星开始模仿
      </p>
    </div>
    <div class="content-container">
      <h1>职业选手准星</h1>
      <p>探索顶尖职业CSGO玩家使用的准星设置</p>
      <div class="info-card">
        <Info v-for="(item, index) in list" :key="index" :info="item" />
      </div>
    </div>
  </div>
</template>
  
<script>
import Info from "./components/Info.vue";
import { getAsyncList } from "@/api/sightBead";
import { openLoading, closeLoading } from "@/public/js/loading";
export default {
  components: {
    Info,
  },
  data() {
    return {
      list: [],
    };
  },
  methods: {
    async getAsyncList() {
      try {
        openLoading();
        const { data } = await getAsyncList();
        this.list = data;
        closeLoading();
      } catch (err) {
        this.$message.error(err);
        closeLoading();
      }
    },
  },

  created() {
    this.getAsyncList();
  },
};
</script>
  
  <style lang="less" scoped>
.sight-bead {
  background-color: #f3f4f6;
  position: relative;
  .header-top {
    text-align: center;
    background-color: #161e2c;
    color: #fff;
    height: 250px;
    .code {
      padding-top: 75px;
      font-size: 25px;
      font-weight: 600;
    }
    .desc {
      padding-top: 10px;
      text-align: center;
    }
  }
  .content-container {
    background-color: #ffffff;
    width: 80%;
    margin: 0 auto;
    margin-top: -30px;
    border-radius: 10px;
    h1 {
      text-align: left;
      padding-left: 20px;
    }
    p {
      text-align: left;
      padding-left: 20px;
      margin-bottom: 10px;
    }
    .info-card {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>